<script setup lang="ts">
import { reactive, ref } from 'vue';
// 导入库
import { FormInstance } from 'element-plus';
import { InternalRuleItem, Value } from "async-validator";
// 引入 vue router
import { useRouter } from "vue-router";
// 构建 router 对象
const router = useRouter()

// 表格引用对象
const formRef = ref<FormInstance>();

// 定义 vue 响应式数据
const data = reactive<{
  eleValue: string // 获取 element 输入框 值
}>({
  eleValue: ""
});

// 定义获取 form 变量的 model 
const formModel = reactive<{
  account: string // 账户
  password: string // 密码
}>({
  account: "",
  password: ""
});

// 提交表单
const onSubmit = async ()=>{
  // 对输入参数进行验证
  const validate = await formRef.value.validate();
  if (!validate) {
    return;
  }
  // 输入表单的值
  console.log(formModel)
  router.push("/newpage")
};

// 校验密码长度
// 自定义表单规则器的写入都是固定的
//  value 值就是输入框对应的值，都是为字符串
const passwordLengthValidator = (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void) =>{
  if(value.length >= 6) {
    // 负责规则，直接调用 callback
    callback();
  } else {
    // 不符合规则，通过 new Error 返回错误
    callback(new Error("密码长度不能小于 6"));
  }
};

</script>
<template>
  <div class="new-page">
    <div class="header vertical-layout-center">电商数据可视化平台</div>
  <!-- ref 获取 form 的对象 -->
  <!-- :model 设置到 el-form -->
    <div class="form-wrapper">
    <el-form ref="formRef" :model="formModel">
      <!-- form 表单的成员 -->
      <!-- label 标签名 prop 要和 formModel 中的变量一致， rules 校验规则 -->
      <el-form-item prop="account" label="账号" :rules="[
        { required: true, message: '用户名不能为空', trigger: 'blur' }]">
        <el-input v-model="formModel.account" placeholder="请输入用户名/手机号" />
      </el-form-item>
      <!-- 在 rules 中使用自定义的验证器 -->
      <el-form-item prop="password" label="密码" :rules="[
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { required: true, validator: passwordLengthValidator, trigger: 'blur' }
      ]">
        <!-- type 设置为密码类型 -->
        <el-input type="password" v-model="formModel.password" placeholder="请输入密码" />
      </el-form-item>
    </el-form>
  </div>
  <el-button class="btn" type="primary" @click="onSubmit">登录</el-button>
</div>
</template>
<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";
.new-page {
    // 设置为绝对定位
    position: absolute;
    // 距离 左边距、右边距、上边距、下边距 都为 0，目标是要让当前页面铺满窗口
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    // 设置背景图片
    background-image: url('@/assets/img/login-bk.png');
    // 然后图片铺满窗口
    background-size: cover;
    background-position: center;
    // 背景图片不随页面滚动而滚动
    background-attachment: fixed;
}
.header {
        height: vh(200);
        color: hwb(0 100% 0%);
        font-size: vw(32);
        font-weight: bold;
    }
.form-wrapper {
  margin-top: 150px;
  margin-left: 500px;
  width: 400px;
}
.btn{
  margin-top: 25px;
  margin-left: 675px;
  width: 75px;
}
</style>